// 头部
header {
  height: 3.88rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  background: rgb(124, 116, 95);
  .icon-shezhi {
    position: absolute;
    right: 0.2rem;
    top: 0.34rem;
    font-size: 0.44rem;
    color: #fffef6;
    vertical-align: middle;
  }
  .img {
    width: 1.52rem;
    height: 1.52rem;
    border-right: 50%;
    overflow: hidden;
    img {
      width: 1.52rem;
      height: 1.52rem;
      border-radius: 50%;
    }
  }
  h5 {
    margin-top: 0.18rem;
    margin-bottom: 0.18rem;
    height: 0.54rem;
    line-height: 0.54rem;
    color: #fff;
  }
  > p {
    color: #fff;
    height: 0.26rem;
    font-size: 0.26rem;
    span {
      display: inline-block;
      line-height: 0.24rem;
    }
  }
}
// 主体
main {
  margin-bottom: 0.98rem;
  .mode {
    width: 7.5rem;
    height: 1.3rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background: #403c39;
    .cont {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: #fffdfc;
      span:nth-child(1) {
        font-size: 0.48rem;
      }
      span:nth-child(2) {
        font-size: 0.2rem;
        margin-top: 0.06rem;
      }
    }
  }
  .about {
    padding: 0 0.31rem 0 0.38rem;
    li {
      height: 1.05rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f1f1f1;
      h5 {
        color: #1e1e1e;
        font-size: 0.31rem;
        // line-height: 0.54rem;
        .game {
          display: inline-block;
          width: 0.16rem;
          height: 0.16rem;
          border-radius: 50%;
          background-color: #fa5f5b;
          margin-left: 0.29rem;
          transform: translateY(-0.03rem);
        }
      }
      span {
        color: #969696;
        font-size: 0.2rem;
        font-weight: 600;
        padding-top: 0.03rem;
      }
    }
  }
}
// 尾部
footer {
  position: fixed;
  background-color: #fff;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.98rem;
  border-top: 1px solid #e4e4e4;
  display: flex;
  justify-content: space-around;
  align-items: center;
  a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #262626;
    span:nth-child(1) {
      font-size: 0.44rem;
      &.active {
        color: #0d7ae1;
      }
    }
    span:nth-child(2) {
      font-size: 0.2rem;
      &.active {
        color: #0d7ae1;
      }
    }
  }
}
